<template>
    <div>
        <input type="text" v-model="state.pname">
        <input type="button" value="添加" @click="showProper">
        <table>
            <tr>
                <td>名称</td>
                <td>等级</td>
                <td>方案</td>
                <td>下限</td>
                <td>上限</td>
                <td>时间</td>
                <td>时间</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.pname }}</td>
                <td>{{ item.pdengji }}</td>
                <td>{{ item.pfangan }}</td>
                <td>{{ item.pxiaxian }}</td>
                <td>{{ item.pshangxian }}</td>
                <td>{{ item.pdate.substring(0,10) }}</td>
                <td>{{ item.pdates.substring(0,10) }}</td>
            </tr>
        </table>
        <a>
            每页显示{{ state.size }} 当前第{{ state.index }} 共{{ pcount }}页 共{{ count }}条
            <input type="button" value="首页" @click="fenye(0)">
            <input type="button" value="上一页" @click="fenye(-1)">
            <input type="button" value="下一页" @click="fenye(1)">
            <input type="button" value="尾页" @click="fenye(9)">
        </a>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()

const data: any = reactive({
    state: {
        pname: '',
        size: 2,
        index: 1,
    },
    list: [],
    count: 0,
    pcount: 0,
})

const { state, list, count, pcount } = toRefs(data)

onMounted(() => {
    showProper()
})

const fenye = (i: number) => {
    if (i == 0) {
        state.value.index = 1
    }
    if (i == -1 || i == 1) {
        if (i == -1 && state.value.index == 1) {
            return
        }
        if (i == 1 && state.value.index == pcount.value) {
            return
        }
        state.value.index += i

    } if (i == 9) {

        state.value.index = pcount.value
    }
    showProper()
}

const showProper = () => {
    axios({
        url: 'https://localhost:7022/api/Proper/ShowProper',
        method: 'get',
        params: state.value
    }).then((res) => {
     list.value = res.data.data
     count.value=res.data.count
     pcount.value=res.data.pcount
    })
}



</script>

<style scoped></style>